<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeakSet实战Demo</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100vw;
            height: 100vh;
            background-color: #34495e;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        li{
            width: 150px;
            height: 40px;
            border: 1px solid #f1c40f;
            list-style: none;
            margin: 10px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            color: #ecf0f1;
            transition: .5s all ease-in-out;
        }
        a{
            text-decoration: none;
            font-size: 18px;
            color: #e74c3c;
        }
        .miss{
            border: red;
            color: red;
        }
    </style>
</head>
<body>
    <!-- 
        Set和WeakSet的总结
            Set：  存储的是值类型的数据  是类似数组的类型  可以和数组之间很友好的进行切换  简单的可以理解成是永远都不会有重复的数组  有强大的 size keys values 等方法
            WeakSet：  存储的是引用类型的数据  也是类数组的类型  也可以和数组之间很友好的切换  但是由于它是存储的引用类型 并且还是弱引用类型  所以它没有了 size keys() values()这些算法方法的功能
    -->
    <div class="container">
        <ul>
            <li>Vue.jsa<a href="javascript:;">X</a></li>
            <li>Node.js<a href="javascript:;">X</a></li>
            <li>javascript<a href="javascript:;">X</a></li>
        </ul>
    </div>
    <script>
        class show{
            // 类的构造函数  是在类被初始化以后就会自动执行的函数  不像其他的自定义函数需要.方法名()才会执行
            constructor(){
                this.items = document.querySelectorAll('ul>li')
                this.list = new WeakSet()
                this.items.forEach(item=>{
                    this.list.add(item)
                })
                console.log(this.list)
            }
            change(){
                this.items.forEach(item=>{
                    let a = item.querySelector('a')
                    a.addEventListener('click',(e)=>{
                        // 参数e里面包含了所有与这个元素有关的数据
                        // 获取一个元素的父元素 可以通过e参数里面的target属性中的parentElement 来直接获取这个元素的父元素
                        const parent = e.target.parentElement
                        if(this.list.has(parent)){
                            parent.classList.add('miss')
                            this.list.delete(parent)
                        }else{
                            // 功能一  删除了提示已经删除了 并且点击了没有效果
                            // alert('已经删除了哦')
                            // 功能二  删除了点击还能复原的操作
                            this.list.add(parent)
                            parent.classList.remove('miss')
                        }
                    })
                })
            }
        }
        new show().change()
    </script>
</body>
</html>